<template>
	<tab-page :current="0" hide-title-bar @tabBarLoad="handleTabBarLoad">
		<view class="relative">
			<image src="/static/first/home.jpg" style="width: 750rpx" mode="widthFix" @load="homeImgLoad" />
			<view class="text-center absolute inset-x-0" :style="{ bottom: arrowBottom + 'px' }">
				<image src="/static/first/arrow.png" style="width: 100rpx" mode="widthFix" @load="arrowLoad" />
			</view>
		</view>
		<view hover-class="opacity-80" hover-start-time="0" hover-stay-time="0" @click="toOfficial">
			<image src="/static/first/official.png" style="width: 750rpx" mode="widthFix" />
		</view>
		<current-community />
		<view class="text-center py-8 border-b b-active" style="margin: 0 auto 50rpx auto; width: 420rpx">
			<text class="block color-main font-semibold" style="font-size: 70rpx">商品分类</text>
			<!-- <text class="block color-main" style="font-style: italic; font-size: 18rpx">PRODUCT CLASSIFICATION</text> -->
		</view>
		<c-skeleton-list :data="categoryData" :loading="loadingCategory" extraClass="flex flex-wrap py-2-2">
			<view
				v-for="(el, i) in categoryData"
				:key="el.id"
				class="border-box flex-center color-main relative"
				style="width: 33.333333%; height: 210rpx; margin-bottom: 40rpx"
				hover-class="opacity-80"
				hover-start-time="0"
				hover-stay-time="0"
				@click="handleCategory(el)"
			>
				<view class="mb-1-3">
					<text class="iconfont" :class="el.icon" style="font-size: 100rpx"></text>
				</view>
				<text class="text-n block font-semibold">{{ el.name }}</text>
				<view
					v-if="(i + 1) % 3 !== 0"
					class="absolute right-0 w-min bg-active"
					style="height: 100rpx; top: 50%; margin-top: -50rpx"
				></view>
			</view>
		</c-skeleton-list>
		<view style="width: 420rpx" class="border-t b-active mx-auto mb-3-1" />
		<!-- <view v-if="firstLoadingAct">
			<c-skeleton extraClass="mb-2-2" extraStyle="height: 200px"></c-skeleton>
			<c-skeleton extraClass="mb-2-2" extraStyle="height: 200px"></c-skeleton>
			<c-skeleton extraStyle="height: 200px"></c-skeleton>
		</view>
		<view class="px-1 mb-2-2" v-else-if="actData.length > 0">
			<act-item v-for="el in actData" :data="el" :key="el.id" @join="handleJoinSuc" :disabled="loadingAct" />
			<view v-if="hasMoreAct" class="text-center py-2-2" @click="toMoreAct">
				<text class="text-l color-main font-semibold">查看更多活动</text>
			</view>
		</view>
		<view v-if="actData.length > 0" style="width: 420rpx" class="border-t b-active mx-auto mb-3-1" /> -->
		<!-- <view class="good-list b-active border-t" style="margin: 100rpx 0 100rpx 0">
			<view
				v-for="(el, i) in goodList"
				:key="i"ss
				class="p-2-2 b-active overflow-hidden border-b"
				:class="[(i + 1) % 3 === 0 ? '' : 'border-r']"
				hover-class="opacity-80"
				hover-start-time="0"
				hover-stay-time="0"
				@click="toDetail(el)"
			>
				<view class="bg-color-1 rounded-xl mb-1-3" style="height: 250rpx">
					<image :src="FALLBACK_IMG" class="w-full h-full" mode="aspectFit" />
				</view>
				<view style="height: 100rpx">
					<text class="color-main text-xn font-semibold block"> 八宝贡.高原羊玉脂米 </text>
					<text class="color-main text-xn font-semibold block"> 2.5kg </text>
				</view>
			</view>
		</view>
		<view style="width: 420rpx" class="border-t b-active mx-auto" /> -->
		<c-confirm-dialog></c-confirm-dialog>
	</tab-page>
</template>

<script>
import { ref, onMounted, watch } from 'vue';
import { FALLBACK_IMG } from '@/uni-sdk/utils/media.js';
import { getClassList } from '@/base/api/goods.js';
import { getActPage } from '@/base/api/activity.js';
import { setItem } from '@/uni-sdk/utils/storage.js';
import authCache from '@/uni-sdk/utils/authCache';

export default {
	onLoad() {
		this.first = true;
	},
	onShow() {
		const target = getApp().globalData.curPageNeedUpdate();
		if (target || this.first) {
			this.first = false;
			this.loadAct();
		}
	},
	onPageScroll(e) {
		let newArrowBottom = this.arrowStartBottom - e.scrollTop;
		if (newArrowBottom < this.arrowOriginalBottom) {
			newArrowBottom = this.arrowOriginalBottom;
		}
		this.arrowBottom = newArrowBottom;
	},
	setup() {
		const arrowBottom = ref(0);
		const arrowOriginalBottom = ref(uni.upx2px(80));
		const arrowStartBottom = ref(0);
		const arrowHeight = ref();
		const tabBarHeight = ref();
		const imgHeight = ref();
		let screenHeight;
		function arrowLoad(e) {
			arrowHeight.value = e.detail.height;
		}
		function homeImgLoad(e) {
			const info = uni.getSystemInfoSync();
			screenHeight = info.screenHeight;
			imgHeight.value = info.screenWidth / (e.detail.width / e.detail.height);
		}
		function handleTabBarLoad(e) {
			tabBarHeight.value = e.height;
		}
		let init = false;
		watch([tabBarHeight, imgHeight], ([tabBarHeight, imgHeight]) => {
			if (tabBarHeight && imgHeight && !init) {
				init = true;
				if (imgHeight > screenHeight) {
					arrowStartBottom.value = arrowOriginalBottom.value + (imgHeight - screenHeight) + tabBarHeight;
				} else {
					arrowStartBottom.value = arrowOriginalBottom.value;
				}
				arrowBottom.value = arrowStartBottom.value;
			}
		});
		//
		function toOfficial() {}
		/**
		 * category
		 */
		const loadingCategory = ref(false);
		const categoryData = ref([]);
		onMounted(async () => {
			loadingCategory.value = true;
			const data = await getClassList();
			if (data) {
				categoryData.value = data;
			}
			loadingCategory.value = false;
		});
		function handleCategory(el) {
			setItem('curCategoryId', el.id);
			uni.switchTab({
				url: '/pages/home/category/category',
			});
		}
		/**
		 * activity
		 */
		const actData = ref([]);
		const loadingAct = ref(true);
		const firstLoadingAct = ref(true);
		const hasMoreAct = ref(false);
		async function loadAct() {
			// loadingAct.value = true;
			// const data = await getActPage({ pageNum: 1, pageSize: 11 });
			// if (data) {
			// 	const records = data.records;
			// 	hasMoreAct.value = records.length > 10;
			// 	if (hasMoreAct.value) {
			// 		records.pop();
			// 	}
			// 	actData.value = records;
			// 	// console.log(records);
			// }
			// loadingAct.value = false;
			// firstLoadingAct.value = false;
		}
		function toMoreAct() {
			uni.navigateTo({
				url: '/pages/act-list/act-list',
			});
		}
		function handleJoinSuc() {
			loadAct();
		}
		return {
			toOfficial,
			loadingCategory,
			categoryData,
			homeImgLoad,
			arrowLoad,
			arrowBottom,
			handleTabBarLoad,
			arrowOriginalBottom,
			arrowStartBottom,
			FALLBACK_IMG,
			handleCategory,
			actData,
			loadingAct,
			hasMoreAct,
			toMoreAct,
			handleJoinSuc,
			loadAct,
			firstLoadingAct,
		};
	},
};
</script>
<style>
.good-list {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
}
</style>
